<template>
	<!-- <div class="mui-numbox">
		<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
		<input class="mui-input-numbox" type="number" />
		<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
	</div> -->
	<!-- 问题：异步调用的数据，我们不知道什么时候能够拿到kucun值，总归有一刻，会得到一个真正的 kucun值 -->
	<!-- 我们可以使用watch 属性来监听父组件传递过来的kucun 值，不管 watch会被出发击此，
	 但最后一次肯定是一个合法的kucun 数值-->
	<div class="mui-numbox" data-numbox-min="1" :data-numbox-max="kucun">
		<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
		<input id="test" class="mui-input-numbox" type="number" value="1"  @change="countChanged" ref="num"/>
		<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
	</div>
</template>

<script>
	import mui from '../../lib/mui/js/mui.js'
	export default {
		mounted() {
			//初始化数字选择框
			mui(".mui-numbox").numbox()
		},
		methods: {
			countChanged() {
				// console.log(this.$refs.num.value)
				this.$emit('count',parseInt(this.$refs.num.value))
			}
		},
		props: ["kucun"],
		watch:{
			'kucun': function(newVal,oldVal) {
				// 使用 js api 设置 numbox最大值
				mui(".mui-numbox").numbox().setOption("kucun",newVal)
			}
		}
		
	}
</script>

<style lang="scss" scoped></style>
